<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<div>
    <h3 class="modal-title">Execute K8S Resource Not Ready Fault</h3>
    <form #k8sResourceNotReadyForm="ngForm" (ngSubmit)="executeK8SResourceNotReadyFault(k8sResourceNotReadyForm.value);" ngNativeValidate>
        <section class="form-block">
            <div class="form-group">
                <label for="endpointName">Endpoint</label>
                <clr-dropdown>
                    <input clrDropdownTrigger type="text" name="endpointName" (input)="searchEndpoint($event.target.value);displayEndpointFields($event.target.value);" [(ngModel)]="faultFormData.endpointName" />
                    <clr-icon shape="caret down" clrDropdownTrigger size="24" (click)="searchEndpoint('');"></clr-icon>
                    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
                        <ng-container *ngFor="let searchedEndpoint of searchedEndpoints">
                            <button type="button" clrDropdownItem *ngIf="searchedEndpoint.endPointType == 'K8S_CLUSTER'" (click)="setEndpointVal(searchedEndpoint.name);displayEndpointFields(searchedEndpoint.name);">{{searchedEndpoint.name}}</button>
                        </ng-container>
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>
            <div class="form-group">
                <label for="resourceType">Resource Type</label>
                <div class="select">
                    <select name="resourceType" [(ngModel)]="faultFormData.resourceType" required>
                        <ng-container *ngFor="let k8sResourceVal of k8sResourceTypes">
                            <option [value]="k8sResourceVal">{{k8sResourceVal}}</option>
                        </ng-container>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label>Resource</label>
                <div class="clr-control-container clr-control-inline">
                    <div class="clr-radio-wrapper">
                        <input type="radio" id="resourceName" name="resource" value="resourceName" class="clr-radio" (click)="setResourceVal($event.target.value);">
                        <label for="resourceName" class="clr-control-label">Resource Name</label>
                    </div>
                    <div class="clr-radio-wrapper">
                        <input type="radio" id="resourceLabels" name="resource" value="resourceLabels" class="clr-radio" (click)="setResourceVal($event.target.value);">
                        <label for="resourceLabels" class="clr-control-label">Resource Labels</label>
                    </div>
                </div>
            </div>
            <div class="form-group" [hidden]="resourceNameHidden">
                <input type="text" name="resourceName" [(ngModel)]="faultFormData.resourceName" [required]="!resourceNameHidden">
            </div>
            <div class="form-group" [hidden]="resourceLabelsHidden">
                <label></label>
                <span class="label label-info" *ngFor="let item of resourceLabelsData | keyvalue">{{item.key}}={{item.value}}&nbsp;<clr-icon shape="times" size="12" (click)="removeResourceLabels(item.key);"></clr-icon></span>
                <clr-icon shape="plus-circle" (click)="resourceLabelsModal=true;" style="width:21px;height:30px;"></clr-icon>
            </div>
            <div class="form-group" [hidden]="resourceLabelsHidden">
                <label for="randomInjection">Random Injection</label>
                <div class="select">
                    <select name="randomInjection" [(ngModel)]="faultFormData.randomInjection" [required]="!resourceLabelsHidden">
                        <option [ngValue]="true">true</option>
                        <option [ngValue]="false">false</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="appContainerName">App Container Name</label>
                <input type="text" name="appContainerName" [(ngModel)]="faultFormData.appContainerName" required>
            </div>
            <div class="form-group">
                <label for="tags">Tags</label>
                <span class="label label-info" *ngFor="let item of tagsData | keyvalue">{{item.key}}={{item.value}}&nbsp;<clr-icon shape="times" size="12" (click)="removeTag(item.key);"></clr-icon></span>
                <clr-icon shape="plus-circle" (click)="tagsModal=true;" style="width:21px;height:30px;"></clr-icon>
            </div>
        </section>
        <button type="submit" class="btn btn-primary" [clrLoading]="runBtnState">RUN FAULT</button>
    </form>
</div>
<clr-modal [(clrModalOpen)]="resourceLabelsModal">
    <h3 class="modal-title">Add Resource Labels</h3>
    <div class="modal-body">
        <form #resourceLabelsForm="ngForm" (ngSubmit)="updateResourceLabels(resourceLabelsForm.value);resourceLabelsModal=false;resourceLabelsForm.reset();">
            <section class="form-block">
                <div class="form-group">
                    <label for="resourceLabelsKey">Key</label>
                    <input type="text" name="resourceLabelsKey" ngModel>
                </div>
                <div class="form-group">
                    <label for="resourceLabelsValue">Value</label>
                    <input type="text" name="resourceLabelsValue" ngModel>
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="resourceLabelsModal=false;">CANCEL</button>
            <button type="submit" class="btn btn-primary">ADD</button>
        </form>
    </div>
</clr-modal>
<clr-modal [(clrModalOpen)]="tagsModal">
    <h3 class="modal-title">Add Tags</h3>
    <div class="modal-body">
        <form #tagsForm="ngForm" (ngSubmit)="updateTags(tagsForm.value);tagsModal=false;tagsForm.reset();">
            <section class="form-block">
                <div class="form-group">
                    <label for="tagKey">Key</label>
                    <input type="text" name="tagKey" ngModel>
                </div>
                <div class="form-group">
                    <label for="tagValue">Value</label>
                    <input type="text" name="tagValue" ngModel>
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="tagsModal=false;">CANCEL</button>
            <button type="submit" class="btn btn-primary">ADD</button>
        </form>
    </div>
</clr-modal>